<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-09-26 16:08:42
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2025-02-26 14:57:28
 * @FilePath: \hy-ui\src\views\trainingCenter\components\trainingPlan.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div v-loading="loading">
    <div class="examList" v-if="active === '1'">
      <div class="trainingPlanMain">
        <div v-if="list && list.length">
          <div class="trainingPlanList" v-for="item in list" :key="item.id">
            <div class="listTopBar">
              <span>{{ item.planName }}</span>
            </div>
            <div class="train_plan_detail_msg">
              <div>
                <span style="color: #999">起止时间：</span>{{
                  initDate(item.startTime, "YYYY-MM-DD") +
                  " 至 " +
                  initDate(item.endTime, "YYYY-MM-DD")
                }}
              </div>
              <div class="train_plan_peo">
                <span>培训类型：</span>&nbsp;{{
                  item.trainType === "1"
                  ? "线上培训"
                  : item.trainType === "2"
                    ? "线下培训"
                    : "无培训"
                }}
              </div>
              <div class="train_plan_peo" v-if="item.trainType === '2'">
                <span>负责人：</span><span style="margin-right: 20px">{{
                  item.offlineTrainDirector
                }}</span>
              </div>
              <div class="train_plan_peo" v-if="item.trainType === '2'">
                <span>讲师：</span><span style="margin-right: 20px">{{
                  item.offlineTrainLecturer
                }}</span>
              </div>
              <div class="train_plan_peo" v-if="item.trainType === '2'">
                <span>地点：</span><span style="margin-right: 20px">{{
                  item.offlineTrainLocation
                }}</span>
              </div>
            </div>
            <div v-if="item.exams && item.exams.length">
              <div class="trainingPlanItem" v-for="val in item.exams" :key="val.taskId" @click="handleExamDetail(val)">
                <div class="left">
                  <div class="title_tra">
                    <i class="el-icon-s-order"></i><span>{{ val.name }}</span><span>{{ item.planName }}</span>
                  </div>
                  <div class="time_tra">
                    <i class="el-icon-time"></i>考试时间：<span>{{
                      val.startTime && val.endTime
                      ? val.startTime
                        ? initDate(val.startTime, "YYYY-MM-DD HH:mm:ss")
                        : "--" + " 至 " + val.endTime
                          ? initDate(val.endTime, "YYYY-MM-DD HH:mm:ss")
                          : "--"
                      : "随时考"
                    }}</span>
                  </div>
                </div>
                <el-button type="primary" size="mini" v-if="val.status === '0'"
                  @click="handleDetail(val, '2')">开始考试</el-button>
                <el-button type="primary" size="mini" v-if="val.status === '2'"
                  @click="handleDetail(val, '2')">重 考</el-button>
                <el-button type="danger" size="mini" v-if="val.status === '1' && !val.score">待阅卷</el-button>
                <div v-if="val.score && val.status === '1'" class="result">
                  <span>考试分数</span>
                  <span :style="{
                    color:
                      val.score < val.passFraction ? '#F72D2D' : '#2f54eb',
                  }">{{ val.score }} <span>分</span></span>
                </div>
                <img src="../../../assets/images/qualified.png" alt="" class="qualified"
                  v-if="val.status === '1' && Number(val.score) >=  Number(val.passFraction)" />
                <img src="../../../assets/images/noQualified.png" alt="" class="qualified"
                  v-if="val.status === '1' && Number(val.score) < Number(val.passFraction) " />
              </div>
            </div>
            <div class="planNoData" v-else style="width: 100%">
              <img src="../../../assets/images/planNoData.png" alt="" />
              <span>暂无考试</span>
            </div>
          </div>
        </div>
        <div class="planNoData" v-else style="width: 100%">
          <img src="../../../assets/images/planNoData.png" alt="" />
          <span>暂无考试</span>
        </div>
      </div>
    </div>
    <BeginExam v-if="active === '2'" :goBack="handleDetail" :clickExamObj="clickExamObj" />
    <el-dialog :visible.sync="scoreShow" title="查看考试详情" v-if="scoreShow" width="80%">
      <grade :id="infoId" view />
    </el-dialog>
  </div>
</template>
<script>
import BeginExam from "@/views/trainingCenter/components/beginExam";
import { planListWithExam } from "@/api/trainingCenter";
import moment from "moment";
import Grade from '@/views/exam/testTask/grade.vue'
export default {
  components: {
    BeginExam,
    Grade
  },
  data() {
    return {
      activeName: "1",
      active: "1",
      searchValue: "",
      list: [],
      loading: false,
      clickExamObj: {},
      scoreShow: false,
      infoId: ''
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleExamDetail(row) {
      if (row.score && row.status === '1') {
        this.infoId = row.taskId
        this.scoreShow = true
      }

    },
    async getList() {
      this.loading = true;
      const res = await planListWithExam();
      this.list = [...res.data] || [];
      this.loading = false;
    },
    handleDetail(row, type) {
      this.clickExamObj = row;
      this.active = type;
    },
    initDate(date, format) {
      return moment(date).format(format);
    },
  },
};
</script>

<style lang="scss" scoped>
.examList {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f4f4f4;
  padding: 30px 0;
  height: calc(100vh - 135px);

  .planNoData {
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    span {
      font-weight: 500;
      font-size: 12px;
      color: #bbbbbb;
      line-height: 48px;
    }
  }

  .trainingPlanMain {
    width: 1198px;
    overflow-y: auto;

    .chooseCourse {
      .topBar {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &>span {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #666666;
          cursor: pointer;
        }
      }
    }

    ::v-deep .el-tabs__nav-wrap::after {
      display: none;
    }

    .addBtn {
      position: absolute;
      right: 0;
      top: 10px;
      display: flex;

      ::v-deep .el-button--primary {
        background: #2f54eb;
        border: none;
        border-radius: 0 3px 3px 0;
      }

      ::v-deep .el-input__inner {
        border-radius: 3px 0 0 3px;
      }
    }

    .trainingPlanList {
      width: 100%;
      // overflow-y: auto;
      border-radius: 6px;
      padding: 17px 24px;
      background: #fff;
      margin-bottom: 20px;

      .listTopBar {
        display: flex;
        // justify-content: space-between;
        align-items: center;
        padding-bottom: 12px;
        padding-left: 3px;

        span {
          font-weight: 400;
          font-size: 14px;
          color: #000000;
        }
      }

      .train_plan_detail_msg {
        display: flex;
        padding-left: 3px;
        // padding: 12px 13px;
        margin-bottom: 6px;
        color: #333;
        font-size: 14px;
        align-items: center;
        justify-content: flex-start;
        margin-top: -2px;

        div {
          margin-right: 50px;
        }

        .train_plan_peo {
          // width: 30%;
          // overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          height: 19px;
        }
      }

      .trainingPlanItem {
        font-family: Microsoft YaHei;
        font-weight: 400;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f8f8f8;
        border-radius: 10px;
        padding: 24px 30px 33px 24px;
        cursor: pointer;
        margin-top: 20px;
        position: relative;
        overflow: hidden;

        .qualified {
          position: absolute;
          bottom: -40px;
          right: -25px;
          z-index: 1;
        }

        &:hover {
          background: #f6f8ff;
        }

        ::v-deep .el-button--primary {
          background: #2f54eb;
          border: none;
        }

        .result {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;

          &>span {
            font-size: 16px;
            color: #666;
          }

          &>span:nth-of-type(2) {
            color: #2f54eb;
            font-weight: bold;
            font-size: 20px;
            margin-top: 10px;

            span {
              font-size: 18px;
            }
          }
        }

        .left {
          .title_tra {
            display: flex;
            align-items: center;
            margin-bottom: 20px;

            ::v-deep .el-icon-s-order {
              color: #ff4545;
              font-size: 16px;
            }

            &>span:nth-of-type(1) {
              font-size: 18px;
              color: #333333;
              margin-left: 2px;
            }

            &>span:nth-of-type(2) {
              font-size: 14px;
              color: #2f54eb;
              margin-left: 17px;
            }
          }

          .time_tra {
            font-size: 14px;
            color: #666666;
            margin-bottom: 20px;

            ::v-deep .el-icon-time {
              color: #909090;
              margin-right: 3px;
            }
          }
        }
      }
    }
  }
}
</style>